<template>
    <div class="基本">
        <h2>基本</h2>
        <h3>3/2</h3>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-3/2 tw:w-100">
        <h3>5/2</h3>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-5/2 tw:w-100">
        <h3>16:9</h3>
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" class="tw:aspect-video tw:w-100"></iframe>
        <h3>square</h3>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-square tw:w-100">
        <h3>auto</h3>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-auto tw:w-100">
    </div>
    <div class="自定义">
        <h2>自定义</h2>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-[calc(6*3/8)] tw:w-100">
        <br>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:aspect-[1.5] tw:w-100">
    </div>
    <div class="响应式">
        <h2>响应式</h2>
        <img src="@/assets/img/villas.jpg" alt="图片" class="tw:w-100 tw:xs:aspect-square tw:sm:aspect-3/2 tw:md:aspect-video tw:lg:aspect-2/3">
    </div>
</template>